<template>
  <div class="wrap">
    <div class="content" v-loading="loading">
      <el-form
        :model="currentForm"
        ref="form"
        label-width="150px"
        label-suffix=":"
        label-position="left"
        :rules="rules"
      >

        <div class="form-box">
          <div class="form-title">{{ $t('pay.Balance warning settings') }}：</div>
          <el-form-item :label="$t('pay.User Balance')" label-width="200px">
            <el-input-number
              v-model="currentForm.userAmountTips"
              autocomplete="off"
              :min="0"
              :precision="2"
            ></el-input-number>
            {{$t('common.RMB')}}
          </el-form-item>
          <div class="font-red" style="font-size: 13px">
            {{ $t('pay.payTips1') }}
          </div>
        </div>

        <div class="form-box">
          <div class="form-title">{{ $t('setting.settingStockTitle') }}：</div>
          <el-form-item :label="$t('table.平台前台库存',{platform: getMercadoName()})" label-width="200px">
            <el-input-number
              v-model="currentForm.inventoryTipsNum"
              autocomplete="off"
              :min="0"
            ></el-input-number>
          </el-form-item>
          <el-form-item :label="$t('table.平台前台库存',{platform: getFalabellaName()})" v-if="$store.getters.accountFalabella" label-width="200px">
            <el-input-number
              v-model="currentForm.faInventoryTipsNum"
              autocomplete="off"
              :min="0"
            ></el-input-number>
          </el-form-item>
          <el-form-item :label="$t('table.平台前台库存',{platform: getShopeeName()})" v-if="$store.getters.accountShopee" label-width="200px">
            <el-input-number
              v-model="currentForm.spInventoryTipsNum"
              autocomplete="off"
              :min="0"
            ></el-input-number>
          </el-form-item>
          <el-form-item :label="$t('table.平台前台库存',{platform: getSheinName()})" v-if="$store.getters.accountShein" label-width="200px">
            <el-input-number
              v-model="currentForm.siInventoryTipsNum"
              autocomplete="off"
              :min="0"
            ></el-input-number>
          </el-form-item>
          <el-form-item :label="$t('table.平台前台库存',{platform: getAmazonName()})" v-if="$store.getters.accountAmazon" label-width="200px">
            <el-input-number
              v-model="currentForm.awsInventoryTipsNum"
              autocomplete="off"
              :min="0"
            ></el-input-number>
          </el-form-item>
          <el-form-item :label="$t('table.平台前台库存',{platform: getTikTokName()})" v-if="$store.getters.accountTikTok" label-width="200px">
            <el-input-number
              v-model="currentForm.tiktokInventoryTipsNum"
              autocomplete="off"
              :min="0"
            ></el-input-number>
          </el-form-item>
          <el-form-item :label="$t('table.平台前台库存',{platform: getAliexpressName()})" v-if="$store.getters.accountAliexpress" label-width="200px">
            <el-input-number
              v-model="currentForm.aliexpressInventoryTipsNum"
              autocomplete="off"
              :min="0"
            ></el-input-number>
          </el-form-item>
          <el-form-item :label="$t('table.代发库存')" label-width="200px">
            <el-input-number
              v-model="currentForm.stockTipsNum"
              autocomplete="off"
              :min="0"
            ></el-input-number>
            <div class="font-red" style="line-height: 20px;font-size: 13px">
              {{ $t('setting.settingText5') }}
              <br>
              {{ $t('setting.settingStockText2') }}
            </div>
          </el-form-item>

        </div>

        <div class="form-box" v-if="false">
          <div class="form-title">{{ $t('setting.Time Quick Filter Settings') }}：</div>

          <el-form-item :label="$t('setting.Time node')" label-width="200px">
            <el-time-picker
              v-model="currentForm.untreatedOrderScreenTime"
              value-format="HH:mm"
              format="HH:mm"
              :placeholder="$t('setting.any-point-in-time')"
            >
            </el-time-picker>
          </el-form-item>

          <div class="form-content">
            <span class="append-price-tips">* {{$t('setting.settingText6')}}</span>
          </div>
        </div>


        <div class="form-box">
          <div class="form-title">{{ $t('setting.硬件出库设置') }}：</div>
          <el-form-item :label="$t('table.出库确认方式')">
            <el-radio-group v-model="currentForm.hdShippingType">
              <el-radio :label="1">{{ $t('setting.手动确认出库') }}</el-radio>
              <el-radio :label="2">{{ $t('setting.无需称重，扫面单直接确认出库') }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <div class="form-content">
            <div class="append-price-tips">
              * {{ $t('setting.手动确认是指每次扫描贴好的面单出库时，需要点击页面底部的「确认出库」按钮才能完成订单的出库动作；') }}
              <br>
              * {{ $t('setting.相反则是扫描面单之后订单出库自动确认，无需再次点击按钮，也不用回传称重信息等；') }}
            </div>
          </div>

        </div>

        <el-button type="primary" :disabled="disableButton" @click="saveData" :loading="saveLoading">{{ $t('common.confirm') }}</el-button>
      </el-form>



      <div class="form">



      </div>

    </div>
  </div>
</template>

<script>
import {
  deepCopy,
  getFalabellaName,
  getMercadoName,
  getShopeeName,
  getSheinName,
  getAmazonName,
  getTikTokName,
  getAliexpressName,
} from "@/utils";
import {getSetting, saveSetting} from "@/api/setting";
import {getAppName} from "@/utils/settings";
import {getWareHouseName} from "@/utils/common";
import GoodsSizePriceMixin from "@/views/setting/mixin/GoodsSizePriceMixin";
import MiddlePriceMixin from "@/views/setting/mixin/MiddlePriceMixin";
import ShipmentPriceMixin from "@/views/setting/mixin/ShipmentPriceMixin";
import TransferFeeListMixin from "@/views/setting/mixin/TransferFeeListMixin";

export default {
  name: "index",
  mixins: [GoodsSizePriceMixin, MiddlePriceMixin, ShipmentPriceMixin,TransferFeeListMixin],
  data(){
    return {
      currentForm: {
        userAmountTips: 50,
        inventoryTipsNum: 0,
        faInventoryTipsNum: 0,
        spInventoryTipsNum: 0,
        siInventoryTipsNum: 0,
        awsInventoryTipsNum: 0,
        tiktokInventoryTipsNum: 0,
        aliexpressInventoryTipsNum: 0,
        stockTipsNum: 0,
        untreatedOrderScreenTime: '',
        hdShippingType: 1, // 硬件出库模式
        creditAmount: 0,
        transfer2Warehouse: 0, // 中转送仓
        goodsLabelFee: 0, // 贴换标费用
        boxLabelFee: 0, // 贴外箱标价格
        warehouseName: '', // 仓库名
        transferFee: 0, // 调货单价
        shipmentTableType: 1, // 表单类型
        goodsSizeStickerPrice: [], // 商品体积重价格
        packetShipment: 1, // 商品体积重价格
        packetShipmentRate:10, // 商品体积重价格
        packetShipmentFee: 10, // 商品体积重价格
        charteredCarFee: 0, // 包车费用
        middleGeneralPrice: [], // 送仓单价(常规),
        middleExpressPrice: [], // 送仓单价(快递),
        shipmentOneWeightPrice: [], // 一件代发 上架单价
        shipmentMiddleWeightPrice: [], // 中转送仓 上架单价
        transferFeeList: [], // 调货单价 （箱）
      },
      copyForm: {

      },
      loading: false,
      saveLoading: false,

      rules:{

      },
    }
  },
  created() {
    this.getData();
  },
  computed:{
    disableButton(){
      return JSON.stringify(this.copyForm) === JSON.stringify(this.currentForm)
    }
  },
  methods: {
    getShopeeName,
    getSheinName,
    getAmazonName,
    getFalabellaName,
    getMercadoName,
    getWareHouseName,
    getAppName,
    getTikTokName,
    getAliexpressName,
    getData(){
      this.loading = true;
      getSetting()
        .then(res=>{
          this.currentForm = deepCopy(res.data)
          this.copyForm = deepCopy(this.currentForm)

          this.loading = false;
        })
    },

    saveData(){
      this.$refs.form.validate(valid=>{
        if(valid){
          this.saveLoading = true;
          saveSetting(this.currentForm)
            .then(res=>{
              this.saveLoading = false;
              this.$successMessage(res.message)
              this.getData()
              this.$store.dispatch('user/getInfo');
            })
        }
      })

    },
  }
}
</script>
<style>
.form-box{
  .el-form-item__label{
    color: #000000;
    font-weight: bold;
    font-size: 15px;
  }
}
</style>

<style scoped lang="scss">
.wrap {
  padding: 10px 30px;
  .header{
    display: flex;
    justify-content: space-between;
  }
  .content{
    padding: 20px 0 0;
    .header-tips{
      font-size: 14px;
    }
    .form{
      margin-top: 30px;
    }
  }
  .form-box{
    border-radius: 2px;
    border: 1px solid #f2f2f2;
    padding: 15px 20px;
    margin-bottom: 20px;
    .form-title{
      font-weight: bold;
      font-size: 18px;
      //color: #ff0000;
      margin-bottom: 10px;
    }
    .header-tips{
      font-weight: 500;
      color: #FF0000;
    }
    .form-content{
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      .price-box{
        border-radius: 2px;
        border: 1px solid #f2f2f2;
        padding: 15px 20px;
        width: 500px;
        margin-top: 20px;
        margin-right: 50px;
        .price-title{
          font-weight: bold;
          font-size: 14px;
          color: #409EFF;
          margin-bottom: 10px;
        }
      }
      .middle-box{
        border-radius: 2px;
        border: 1px solid #f2f2f2;
        padding: 15px 20px;
        width: 1200px;
        margin-top: 20px;
        margin-right: 50px;
        .title{
          font-weight: bold;
          font-size: 14px;
          color: #409EFF;
          margin-bottom: 10px;
        }
        .middle-content{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          .middle-left{
            width: 50%;
          }
          .middle-right{
            width: 50%;
          }
        }
        .middle-price-content{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          .weight{
            width: 50%;
          }
          .price{
            width: 50%;
          }
        }

      }
      .tallying-box{
        border-radius: 2px;
        border: 1px solid #f2f2f2;
        padding: 15px 20px;
        width: 1200px;
        margin-top: 20px;
        margin-right: 50px;
        .title{
          font-weight: bold;
          font-size: 14px;
          color: #409EFF;
          margin-bottom: 10px;
        }
        .tallying-content{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          .tallying-left{
            width: 50%;
          }
          .tallying-right{
            width: 50%;
          }
          .tallying-price-content{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            .weight{
              width: 50%;
            }
            .price{
              width: 50%;
            }
          }
        }
      }
      .goods-size-price{
        width: 800px;
        .goods-size-price-content{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          margin-bottom: 10px;
          .weight{
            width: 200px;
          }
          .PSC-first{
            width: 200px;
          }
          .PSC-append{
            width: 250px;
          }
        }
      }
      .append-price-tips{
        font-size: 12px;
        color: #7F7F7F;
      }
    }
  }
}
</style>
